<template>
	<view class="all">
		<view class="alldaohang">
			<view v-for="(item,index) in daohanglan">
			   <view class="dangedaohang" @click="click" data-index="{{index}}">{{item}}</view>
		    </view>
		</view>
		<suoyougonghui v-if="show==1"></suoyougonghui>
		<wodegonghui v-if="show==2"></wodegonghui>
		<shenqingliebiao v-if="show==3"></shenqingliebiao>
		<chuangjiangonghui v-if="show==4"></chuangjiangonghui>
	</view>
</template>

<script>
	import suoyougonghui from '@/pages/index/gonghui/suoyougonghui'
	import wodegonghui from '@/pages/index/gonghui/wodegonghui'
	import shenqingliebiao from '@/pages/index/gonghui/shenqingliebiao'
	import chuangjiangonghui from '@/pages/index/gonghui/chuangjiangonghui'
	
	export default {
		components: {
			suoyougonghui,
			wodegonghui,
			shenqingliebiao,
			chuangjiangonghui
		},
		data() {
			return {
				daohanglan:["所有公会","我的公会","申请列表","创建公会"],
				show:4
			}
		},
		methods: {
			click(event){
				  if(this.daohanglan[event.currentTarget.dataset.index]=="所有公会")
				     this.show=1
					else if(this.daohanglan[event.currentTarget.dataset.index]=="我的公会")
					    this.show=2
					else if(this.daohanglan[event.currentTarget.dataset.index]=="申请列表")
						   this.show=3
						   else if(this.daohanglan[event.currentTarget.dataset.index]=="创建公会")
						   	   this.show=4
			}
		}
	}
</script>

<style>
	.all{
		background-color: antiquewhite;
	}
    .alldaohang{
		
		display: flex;
		flex-direction: column;
         align-items: center;
		 width: 150rpx;
		 height:378rpx ;
	}
	.dangedaohang{
		width: 150rpx;
		height: 50rpx;
		border: 1rpx solid aquamarine;
		text-align:center;
		line-height: 50rpx;
	}

</style>
